<template>
  <div>
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="980"
      height="540"
      data-setup="{}"
    >
      <source :src="source" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    source: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      player: null
    };
  },
  methods: {
    initializePlayer() {
      if (this.player) {
        this.player.src({ src: this.source, type: 'video/mp4' });
      } else {
        this.player = videojs(this.$refs.videoPlayer, {}, function onPlayerReady() {
          console.log('Player is ready');
        });
        this.player.src({ src: this.source, type: 'video/mp4' });
      }
    }
  },
  watch: {
    source(newVal) {
      if (newVal) {
        this.initializePlayer();
      }
    }
  },
  mounted() {
    this.initializePlayer();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style>
/* Add custom styles here, example below */
.video-js .vjs-control-bar {
  display: flex;
}
</style>
